<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>边框半径</title>

        <style type="text/css">
            .generic {
                width: 200px;
                height: 200px;
                border: 10px dotted blue;
                margin: 25px auto;
                background: #dfdfdf;
            }

            .first {
                /* 依次设置四角水平半径/依次设置四角垂直半径*/
                border-radius: 50% 25px 75px/50% 25px 75px;
            }

            .second {
                /* 水平半径 [垂直半径]  */
                border-top-left-radius: 25px;
            }

            .third {
                background: url("zhibudao.webp") center/cover no-repeat;
                border: none;
                border-radius: 50%;
                box-shadow: 0 0 30px -5px purple;
            }
        </style>
    </head>
    <body>

        <div class="generic first"></div>

        <div class="generic second"></div>

        <div class="generic third"></div>

    </body>
</html>